{% extends "base.html" %}

{% block title %}首页 - 日志分析系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">系统概览</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshData()">
                <i class="bi bi-arrow-clockwise"></i> 刷新
            </button>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-white bg-primary">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">总日志数</h5>
                        <h2 id="total-logs">0</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-file-text fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-success">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">已分析</h5>
                        <h2 id="analyzed-logs">0</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-graph-up fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">告警数</h5>
                        <h2 id="total-alarms">0</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-exclamation-triangle fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-info">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">应用数</h5>
                        <h2 id="total-apps">0</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-gear fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 系统状态 -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">系统状态</h5>
            </div>
            <div class="card-body">
                <div id="system-status">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>日志接入服务</span>
                        <span class="badge bg-success" id="log-access-status">运行中</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>预处理服务</span>
                        <span class="badge bg-success" id="preprocess-status">运行中</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>分析服务</span>
                        <span class="badge bg-success" id="analyze-status">运行中</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>告警服务</span>
                        <span class="badge bg-success" id="alarm-status">运行中</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>Web服务</span>
                        <span class="badge bg-success" id="web-status">运行中</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">最近活动</h5>
            </div>
            <div class="card-body">
                <div id="recent-activities">
                    <div class="mb-2">
                        <small class="text-muted">2024-01-01 10:00:00</small>
                        <div>系统启动完成</div>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted">2024-01-01 09:55:00</small>
                        <div>处理了 100 条日志</div>
                    </div>
                    <div class="mb-2">
                        <small class="text-muted">2024-01-01 09:50:00</small>
                        <div>发送了 2 条告警</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 快速操作 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">快速操作</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('logs') }}" class="btn btn-outline-primary w-100">
                            <i class="bi bi-file-text"></i> 查看日志
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('analysis') }}" class="btn btn-outline-success w-100">
                            <i class="bi bi-graph-up"></i> 查看分析结果
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('alarms') }}" class="btn btn-outline-warning w-100">
                            <i class="bi bi-exclamation-triangle"></i> 查看告警
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('status') }}" class="btn btn-outline-info w-100">
                            <i class="bi bi-speedometer2"></i> 系统状态
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载时获取数据
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardData();
});

// 加载仪表板数据
function loadDashboardData() {
    // 这里应该调用后端API获取实际数据
    // 目前使用模拟数据
    document.getElementById('total-logs').textContent = '1,234';
    document.getElementById('analyzed-logs').textContent = '1,100';
    document.getElementById('total-alarms').textContent = '15';
    document.getElementById('total-apps').textContent = '8';
}

// 刷新数据
function refreshData() {
    loadDashboardData();
    // 显示刷新提示
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 刷新中...';
    button.disabled = true;
    
    setTimeout(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    }, 1000);
}

// 定期刷新数据（每30秒）
setInterval(loadDashboardData, 30000);
</script>
{% endblock %} 